import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, DatePicker, Button, Spin, message, InputNumber  } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import styles from './index.less';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

@connect(({ paper, loading }) => ({
  paperTitle: paper.paperTitle,
  editPaperLoading: loading.effects['paper/setExamPaper'],
}))
@Form.create()
class Paper extends Component {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'paper/getExaminationPaper',
      callback: (res) => {
        if (res.id) {
          dispatch({
            type: 'paper/getExaminationColumn',
            payload: {
              paperId: res.id
            },
            callback: (quesRes) => {
              if (quesRes) {
                dispatch({
                  type: 'paper/getExaminationQuestionByColumn',
                  payload: {
                    columnIds: quesRes
                  }
                })
              }
            }
          });
        }
      }
    });
  }

  onValidateForm = () => {
    const {
      form: { validateFieldsAndScroll },
      dispatch, 
    } = this.props;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        console.log(values)
        // submit the values
        dispatch({
          type: 'paper/setExamPaper',
          payload: values,
          callback:(res)=>{
            if(res){
              message.info('设置成功');
            }
          }
        });
      }
    });
  };

  render() {
    const { form: { getFieldDecorator }, children, paperTitle, editPaperLoading } = this.props;
    console.log(paperTitle)
    return (
      <GridContent>
        <Row gutter={24}>
          <Col lg={7} md={24}>
            <Spin spinning={editPaperLoading ? true : false}>
              <Card bordered={false} style={{ marginBottom: 24 }}>
                <Form layout="vertical">
                  <Row>
                    <FormItem label="开放，结束 上传答案时间段">
                      {getFieldDecorator('examStartAndEndTime', {
                        rules: [{ required: true, message: '请选择时间段' }],
                        initialValue: paperTitle && paperTitle.examStartAndEndTime
                      })(<RangePicker />)}
                    </FormItem>
                  </Row>
                  <Row>
                    <FormItem label="公布结果时间">
                      {getFieldDecorator('announceAnswer', {
                        rules: [{ required: true, message: '请选择时间' }],
                        initialValue: paperTitle && paperTitle.announceAnswer
                      })(<DatePicker />)}
                    </FormItem>
                  </Row>
                  <Row>
                    <FormItem label="总分">
                      {getFieldDecorator('totalScore', {
                        rules: [{ required: true, }],
                        initialValue: paperTitle && paperTitle.totalScore
                      })(<InputNumber max={100} min={1} placeholder="总分" />)}
                    </FormItem>
                  </Row>
                  <Row>
                    <FormItem label="备注,规则介绍">
                      {getFieldDecorator('examBackup', {
                        rules: [{ required: false, }],
                        initialValue: paperTitle && paperTitle.examBackup
                      })(<Input.TextArea autosize={{ minRows: 2, maxRows: 4 }} placeholder="上传备注,规则介绍" />)}
                    </FormItem>
                  </Row>
                  <Row>
                    <FormItem>
                      <Button type="primary" onClick={this.onValidateForm}>
                        提交
                    </Button>
                    </FormItem>
                  </Row>
                </Form>
              </Card>
            </Spin>
          </Col>
          <Col lg={17} md={24}>
            <Card
              className={styles.tabsCard}
              bordered={false}
              title="题目编写"
            >
              {children}
            </Card>
          </Col>
        </Row>
      </GridContent>
    );
  }
}

export default Paper;
